import React, { useEffect, useState } from 'react'
import { Button, Overlay, Field, Form, Area } from 'react-vant';
import { areaList } from '@vant/area-data'; //引入


function AddressAlert(props) {
  const { visible, title, onClose, addAddress, item } = props;

  let [areaValues, setAreaValues] = useState([]);//点击提交将城市的数据存储

  const [form] = Form.useForm();

  useEffect(() => {
    if (item.id) { //通过id判断回显的数据是否存在
      // 存在，表单数据回显 
      form.setFieldsValue(item)
    } else {
      form.resetFields(); //表单清空
    }
  },[])
  // ❤ 注：useEffect的第二个参数是个数组，是要监听的数据。如果为空，只会挂载的时候执行一次

  // console.log("formformform", form);

  // 点击提交 
  const onFinish = (values) => {
    values.citys = areaValues;

    console.log("提交", values);
    addAddress(values); //调用新增地址
    onClose(); //关闭弹窗
  };



  return (
    <div>
      <Overlay visible={visible}>
        <div className='overCont'>
          <span onClick={onClose} //点击关闭弹窗
          >X</span>
          <div className='title'>{title}</div>
          <div>
            <Form
              form={form} //绑定的输入内容
              showValidateMessage={false}
              onFinish={onFinish} //点击提交调用的方法
              footer={
                <div style={{ margin: '16px 16px 0' }}>
                  <Button round nativeType="submit" type="primary" block>
                    提交
                  </Button>
                </div>
              }
            >
              <Form.Item
                tooltip={{ //表单问题描述，点击用户名后面的问号，展示的提示弹窗
                  message:
                    '用户名是必填项',
                }}
                intro="确保这是唯一的用户名" //输入框下的提示
                rules={[{ //表单规则
                  required: true, //是否必填
                  message: '请填写用户名' //没有填的时候提示
                }]}
                name="name" //是当前绑定表单输入对象的属性
                label="用户名"
              >
                <Field placeholder="请输入用户名" />
              </Form.Item>



              <Form.Item
                tooltip={{ //表单问题描述，点击用户名后面的问号，展示的提示弹窗
                  message:
                    '手机号是必填项',
                }}
                rules={[{ //表单规则
                  required: true, //是否必填
                  message: '请填写手机号' //没有填的时候提示
                }]}
                name="phone" //是当前绑定表单输入对象的属性
                label="手机号"
              >
                <Field placeholder="请输入手机号" />
              </Form.Item>



              <Form.Item label="选择城市" name="citys" customField>
                <Area
                  areaList={areaList}
                  onChange={(values) => {
                    setAreaValues(values)
                  }}
                />
              </Form.Item>



              <Form.Item
                tooltip={{ //表单问题描述，点击用户名后面的问号，展示的提示弹窗
                  message:
                    '详细地址是必填项',
                }}
                rules={[{ //表单规则
                  required: true, //是否必填
                  message: '请填写详细地址' //没有填的时候提示
                }]}
                name="address" //是当前绑定表单输入对象的属性
                label="详细地址"
              >
                <Field placeholder="请输入详细地址" />
              </Form.Item>

            </Form>
          </div>
        </div>
      </Overlay>
    </div>
  )
}

export default AddressAlert